<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>配送管理</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
    }
    header {
      background-color: #333;
      color: #fff;
      padding: 25px 15px;
      text-align: center;
    }
    .container {
      display: flex;
      padding-top: 50px;
    }
    .sidebar {
      width: 20%;
      background-color: #f4f4f4;
      padding: 20px;
    }
    .main-content {
      width: 80%;
      padding: 20px;
    }
    .section {
      border: 1px solid #ccc;
      padding: 20px;
      margin-bottom: 20px;
    }
    form {
      margin-bottom: 20px;
    }
    label {
      display: block;
      margin-bottom: 5px;
    }
    input[type="text"] {
      width: calc(100% - 16px);
      padding: 8px;
      margin-bottom: 10px;
      box-sizing: border-box;
    }
    button {
      background-color: #28a745;
      color: white;
      padding: 8px 12px;
      border: none;
      cursor: pointer;
      margin-right: 5px;
    }
    button:hover {
      background-color: #218838;
    }
    .delivery-list {
      max-height: 300px;
      overflow-y: auto;
    }
    .modal {
      display: none;
      position: fixed;
      z-index: 1;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      overflow: auto;
      background-color: rgba(0,0,0,0.4);
    }
    .modal-content {
      background-color: #fefefe;
      margin: 15% auto;
      padding: 20px;
      border: 1px solid #888;
      width: 60%;
    }
    .close {
      color: #aaa;
      float: right;
      font-size: 28px;
      font-weight: bold;
    }
    .close:hover,
    .close:focus {
      color: black;
      text-decoration: none;
      cursor: pointer;
     }
    .btn-blue {
      background-color: #007bff;
      color: white;
      padding: 8px 12px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }
    .btn-blue:hover {
      background-color: #0056b3;
    }
    .btn-red {
      background-color: #dc3545;
      color: white;
      padding: 8px 12px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }
    .btn-red:hover {
      background-color: #c82333;
    }

    .footer {
      height: 100px;
    }
    .main-content {
      margin-bottom: 100px; /*  将表格与页面底部空白区域对齐 */
    }
  </style>
</head>
<body>
<!-- 导航栏 -->
<header>
  <h1>配送管理</h1>
</header>

<div class="container">
  <div class="sidebar" th:replace="twoGroup/twoGroup.html"></div>
  <div class="main-content">
    <div class="section">
      <!-- 添加新配送表单 -->
      <h2>新增配送</h2>
      <form id="addDeliveryForm">
        <label for="trackingNumber">运单号码：</label>
        <input type="text" id="trackingNumber" required><br>
        <label for="recipient">收件人：</label>
        <input type="text" id="recipient" required><br>
        <label for="status">状态：</label>
        <input type="text" id="status" required><br>
        <button type="submit">添加配送</button>
      </form>
    </div>

    <div class="section">
      <!-- 显示配送列表 -->
      <h2>配送列表</h2>
      <div class="delivery-list" id="deliveryList"></div>
    </div>
  </div>
</div>

<!-- 模态框 -->
<div id="myModal" class="modal">
  <div class="modal-content">
    <span class="close" onclick="closeModal()">&times;</span>
    <h2>编辑配送</h2>
    <form id="editDeliveryForm">
      <!-- Add a hidden input field for delivery ID -->
      <input type="hidden" id="editDeliveryId">
      <label for="editTrackingNumber">运单号码：</label>
      <input type="text" id="editTrackingNumber" required><br>
      <label for="editRecipient">收件人：</label>
      <input type="text" id="editRecipient" required><br>
      <label for="editStatus">状态：</label>
      <input type="text" id="editStatus" required><br>
      <button type="submit">保存</button>
    </form>
  </div>
</div>

<!-- JavaScript 用于获取、添加、更新和删除配送 -->
<script>
  // 添加新配送
  document.getElementById('addDeliveryForm').addEventListener('submit', function(event) {
    event.preventDefault();
    const trackingNumber = document.getElementById('trackingNumber').value;
    const recipient = document.getElementById('recipient').value;
    const status = document.getElementById('status').value;

    fetch('/api/deliveries', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({ trackingNumber, recipient, status })
    })
            .then(response => {
              if (response.ok) {
                fetchDeliveries(); // 刷新配送列表
                document.getElementById('addDeliveryForm').reset(); // 清空表单字段
              }
            });
  });

  // 删除配送
  function deleteDelivery(id) {
    fetch(`/api/deliveries/${id}`, {
      method: 'DELETE'
    })
            .then(response => {
              if (response.ok) {
                fetchDeliveries(); // 刷新配送列表
              }
            });
  }

  // 打开模态框进行编辑
  function editDelivery(deliveryId, trackingNumber, recipient, status) {
    var modal = document.getElementById("myModal");
    modal.style.display = "block";

    // 填充表单字段
    document.getElementById('editDeliveryId').value = deliveryId; // Set delivery ID
    document.getElementById('editTrackingNumber').value = trackingNumber;
    document.getElementById('editRecipient').value = recipient;
    document.getElementById('editStatus').value = status;
  }

  // 提交编辑后的配送信息
  document.getElementById('editDeliveryForm').addEventListener('submit', function(event) {
    event.preventDefault();
    const deliveryId = document.getElementById('editDeliveryId').value; // Get delivery ID
    const trackingNumber = document.getElementById('editTrackingNumber').value;
    const recipient = document.getElementById('editRecipient').value;
    const status = document.getElementById('editStatus').value;

    fetch(`/api/deliveries/${deliveryId}`, { // Use delivery ID in the URL
      method: 'PUT',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({ deliveryId, trackingNumber, recipient, status }) // Include deliveryId in the request body
    })
            .then(response => {
              if (response.ok) {
                fetchDeliveries(); // 刷新配送列表
                closeModal(); // 关闭模态框
              }
            });
  });

  // 关闭模态框
  function closeModal() {
    var modal = document.getElementById("myModal");
    modal.style.display = "none";
  }

  // 获取并显示配送列表
  function fetchDeliveries() {
    fetch('/api/deliveries')
            .then(response => response.json())
            .then(deliveries => {
              const deliveryList = document.getElementById('deliveryList');
              deliveryList.innerHTML = ''; // 清空列表

              deliveries.forEach(delivery => {
                const listItem = document.createElement('div');
                listItem.innerHTML = `
                  <p>运单号码: ${delivery.trackingNumber}</p>
                  <p>收件人: ${delivery.recipient}</p>
                  <p>状态: ${delivery.status}</p>
                  <button class="btn-red" onclick="deleteDelivery('${delivery.trackingNumber}')">删除</button>
                  <button class="btn-blue" onclick="editDelivery('${delivery.trackingNumber}', '${delivery.recipient}', '${delivery.status}')">编辑</button>
                `;
                deliveryList.appendChild(listItem);
              });
            });
  }

  // 页面加载时获取并显示配送列表
  window.onload = fetchDeliveries;
</script>
<div class="footer"></div>
<div th:replace="twoGroup/twoGroupmain.html"></div>
</body>
</html>
